<template>
  <div class="mnt-dialog form-container">
    <el-form ref="form1" label-width="120px" :model="formModel1" :rules="rules">
      <el-form-item label="车辆VIN码:" prop="vin">
        <el-input v-model="formModel1.vin" @keyup.prevent.native.enter="queryRecord" />
      </el-form-item>
      <el-row class="submit-area">
        <el-col :span="24">
          <el-button
            type="primary"
            plain
            @click="saveRecord"
          >保存
          </el-button>
          <el-button
            type="primary"
            plain
            @click="printQualified"
          >打印合格证
          </el-button>
          <el-button
            type="primary"
            plain
            @click="printConsistency"
          >打印一致性证书
          </el-button>
          <el-button
            type="primary"
            plain
            @click="fivePrint"
          >打印三包凭证
          </el-button>
          <el-button
            type="primary"
            plain
            @click="fivePrint"
          >打印环保证书
          </el-button>
          <el-button
            type="primary"
            plain
            @click="fivePrint"
          >打印燃油标识
          </el-button>
          <el-button
            type="primary"
            plain
            @click="fivePrint"
          >五证打印
          </el-button>
          <el-button
            type="primary"
            plain
            @click="fivePrint"
          >纸张配置
          </el-button>
          <el-button
            type="primary"
            plain
            @click="fivePrint"
          >验证合格证
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <br>
    <el-form ref="form" :model="formModel" label-width="160px">
      <el-row style="text-align: center">
        <fieldset>
          <legend />
          <div>
            <br>
            <el-col :span="8">
              <el-form-item label="3C认证码:" prop="null">
                <el-input v-model="formModel.null" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前纸张:" prop="null">
                <el-input v-model="formModel.null" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="上页纸张:" prop="null">
                <el-input v-model="formModel.null" />
              </el-form-item>
            </el-col>
          </div>
        </fieldset>
        <br>
        <fieldset>
          <legend />
          <div>
            <br>
            <el-col :span="8">
              <el-form-item label="打印状态:" prop="printStatus">
                <el-radio v-model="formModel.printStatus" disabled label="printed">已打印</el-radio>
                <el-radio v-model="formModel.printStatus" disabled label="un_print">未打印</el-radio>
              </el-form-item>
            </el-col>
          </div>
        </fieldset>
        <br>
        <fieldset>
          <legend />
          <div>
            <br>
            <el-col :span="8">
              <el-form-item label="公安部反馈合格证编号:" prop="hId">
                <el-input v-model="formModel.hId" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆制造企业名称:" prop="clscdwmc">
                <el-input v-model="formModel.clscdwmc" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发证日期:" prop="printDay">
                <el-input v-model="formModel.printDay" :readonly="readonly" />
              </el-form-item>
            </el-col>
          </div>
        </fieldset>
        <br>
        <fieldset>
          <legend />
          <div>
            <br>
            <el-col :span="8">
              <el-form-item label="车辆品牌:" prop="clpp">
                <el-input v-model="formModel.clpp" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆名称:" prop="clmc">
                <el-input v-model="formModel.clmc" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆型号:" prop="clxh">
                <el-input v-model="formModel.clxh" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车身颜色:" prop="clys">
                <el-input v-model="formModel.clys" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发动机型号:" prop="fdjxh">
                <el-input v-model="formModel.fdjxh" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆识别代号:" prop="vin">
                <el-input v-model="formModel.vin" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="完整发动机号:" prop="keypartNo">
                <el-input v-model="formModel.keypartNo" @keyup.prevent.native.enter="queryRecord" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆生产单位地址:" prop="clscdwdz">
                <el-input v-model="formModel.clscdwdz" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆生产单位名称:" prop="clscdwmc">
                <el-input v-model="formModel.clscdwmc" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆制造日期:" prop="storageTime">
                <el-input v-model="formModel.storageTime" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="车辆制造企业其他信息:" prop="clzzqyqtxx">
                <el-input v-model="formModel.clzzqyqtxx" type="textarea" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:" prop="remarks">
                <el-input v-model="formModel.remarks" type="textarea" :readonly="readonly" />
              </el-form-item>
            </el-col>
          </div>
        </fieldset>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'KeyPartTrackBind',
  data() {
    return {
      readonly: true,
      formModel1: {
        vin: ''
      },
      formModel: {
        printStatus: '',
        hId: '',
        clscdwmc: '',
        printDay: '',
        clpp: '',
        clmc: '',
        clxh: '',
        clys: '',
        fdjxh: '',
        vin: '',
        keypartNo: '',
        clscdwdz: '',
        storageTime: '',
        clzzqyqtxx: '',
        remarks: ''
      },
      rules: {}
    }
  },
  mounted() {
    this.initRules()
  },
  created() {
  },
  methods: {
    initRules() {
      this.rules = {
        vin: this.HEY_VALIDATOR({ type: ['VIN'], required: true })
      }
      this.$nextTick(_ => {
        this.$form.clearValidate()
      })
    },
    // 保存记录
    saveRecord() {
      if (this.formModel1.vin === '' || this.formModel.keypartNo === '') {
        this.$message.warning('vin和发动机号必填!')
        return
      }
      const tip = '记录保存成功!'
      const param = { vin: this.formModel1.vin, keypartNo: this.formModel.keypartNo }
      this.post('/qualityCertificatePrint/saveRecord', param).then(res => {
        this.$info(tip, () => {
          this.$emit('mntSuc', res)
        })
      })
    },
    // 打印合格证
    printQualified() {
      if (this.formModel1.vin === '') {
        this.$message.warning('vin号必填!')
        return
      }
      const tip = '已开始打印,请等待!'
      const param = { vin: this.formModel1.vin }
      this.post('/qualityCertificatePrint/printQualified', param).then(res => {
        this.$info(tip, () => {
          this.$emit('mntSuc', res)
        })
      })
    },
    // 打印一致性证书
    printConsistency() {
      if (this.formModel1.vin === '') {
        this.$message.warning('vin号必填!')
        return
      }
      const tip = '已开始打印,请等待!'
      const param = { vin: this.formModel1.vin }
      this.post('/qualityCertificatePrint/printConsistency', param).then(res => {
        this.$info(tip, () => {
          this.$emit('mntSuc', res)
        })
      })
    },
    // 根据vin和发动机号查询记录
    queryRecord() {
      if (this.formModel1.vin === '' || this.formModel.keypartNo === '') {
        this.$message.warning('vin和发动机号必填!')
        return
      }
      const param = { vin: this.formModel1.vin, keypartNo: this.formModel.keypartNo }
      this.post('/qualityCertificatePrint/queryRecord', param).then(res => {
        this.formModel = res
      })
    },
    // 五证打印
    fivePrint() {
      // const param = { vin: this.formModel.vin }
      const tip = '已开始打印,请等待!'
      this.post('/qualityCertificatePrint/fivePrint', this.formModel1.vin).then(res => {
        this.$info(tip, () => {
          this.$emit('mntSuc', res)
        })
      })
    }
  }
}
</script>
